<template>
  <div class="selfAside_module">
    <el-aside :width="asideWidth">
      <el-scrollbar>
        <el-menu
          background-color="#333"
          text-color="#409EFF"
          active-text-color="#409EFF"
          :default-active="currentIndex"
        >
          <template v-for="item in menuData">
            <!-- 判断是否有子菜单 -->
            <el-sub-menu
              v-if="item.children && item.children.length > 0"
              :index="item.path"
              :key="item.path"
            >
              <template #title>
                <span>{{ item.title }}</span>
              </template>
              <!-- 递归渲染子菜单 -->
              <MenuItem :asideWidth="('180px')" style="padding-left:5px;background:rgb(84 92 100)"
                :menuData="item.children"
                @asideClick="handleClick"
                :currentIndex="currentIndex"
              />
            </el-sub-menu>
            <el-menu-item
              v-else
              :index="item.path"
              :key="item.path"
              @click="handleClick(item)"
            >
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { MenuData,MenuItem } from "../../viewModel/aside";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "MenuItem",
  props: {
    menuData: {
      type: Array as PropType<MenuData[]>,
      required: true,
    },
    currentIndex: {
      type: String,
    },
    asideWidth: {
      type:String,
      default: () => "200px"
    }
  },
  setup(props, { emit }) {
    const router = useRouter();
    const handleClick = (payload:MenuItem) => {
      router.push(`/baseLayout/${payload.path}`);
      emit("asideClick", payload);
    };
    return {
      handleClick,
    };
  },
});
</script>
<style>
.selfAside_module {
  width: 100%;
}
:root {
  --el-menu-level-padding: 0px !important;
}
.selfAside_module .el-aside {
  background-color: rgba(84, 92, 100, 1);
}
.selfAside_module .el-menu-item,
.selfAside_module .el-sub-menu__title {
  color: #fff;
  background-color: rgba(84, 92, 100, 1);
}
.selfAside_module .el-menu-item:hover {
  background: #333;
}
.el-submenu__title:focus,
.el-submenu__title:hover {
  background: blue;
}
.selfAside_module .el-menu-item.is-active {
  color: #409eff;
  background: #333;
}
</style>
<style scoped></style>
